<{extends file="layout.tpl"}>

<{block name=css}>
<style type="text/css">
	.m-area-default li:after{
		content: '';
		display: block;
		clear: both;
	}
	.m-area-default li{ line-height: 24px; margin: 10px 0; }
	.m-area-default li:last-child{ text-align: center; margin-top: 30px; }
	.m-area-default .form-control{ display: inline-block; width: 240px; margin-right: 8px; }
	.m-area-default .inputDate{ 
		display: inline-block;
		width: 80px;
		padding-left: 2px;
		margin-right: 8px;
		border-radius: 2px;
		border: 1px solid #dcdcdc;
		line-height: 24px;
		transition: border-color 515ms ease-in-out;
	}
	.m-area-default .inputDate:focus{
		outline: none;
		border-color: #2580A2;
	}
	.m-area-title{ 
		background: #2580A2; 
		color: #fff; 
		line-height: 34px;
		padding-left: 8px;
		margin-top: 20px;
	}
	.dominType{ display: none; }
	.dominType.simple{ display: block; }
	.box{ padding-left: 20px; line-height: 34px; }
	.box input{ margin: 0 8px; position: relative; top: 2px; }
</style>
<{/block}>


<{block name=content}>
<section class="m-panel-box">
	<h4>添加域</h4>
	<div class="m-panel-body">
		<div>
		<form class="infoForm">
			<ul class="m-area-default">
				<li class="m-area-title">域详细信息</li>
				<li>
					<div class="col-md-4">域类型*</div>
					<div class="col-md-8">
						<div class="m-domains-type">
							<div>
								<input type="radio" name="domain_type" checked data-target="simple" value="domain_standard">
								标准域名
							</div>
							<div>
								<input type="radio" name="domain_type" data-target="ipv4" value="domain_reverse_ipv4">
								反向域（IPv4）
							</div>
							<div><input type="radio" name="domain_type" data-target="ipv6" value="domain_reverse_ipv6">反向域（IPv6）</div>
						</div>
					</div>
				</li>
				<li class="dominType simple">
					<div class="col-md-4">域名</div>
					<div class="col-md-8">
						<input type="text" name="domain_name" class="form-control">
					</div>
				</li>
				<li class="dominType ipv4">
					<div class="col-md-4">注意</div>
					<div class="col-md-8">
							如果希望自动创建所有IP-DNS映射，该界面允许您为/ 24网络范围设置反向DNS记录，方法是指定网络地址和可选的PTR记录的域
					</div>
				</li>
				<li class="dominType ipv4">
					<div class="col-md-4">IPv4网络地址*</div>
					<div class="col-md-8">
						<input type="text" name="ipv4_network" class="form-control">
						include / cidr范围大于/ 24
					</div>
				</li>
				<li class="dominType ipv4">
					<div class="col-md-4">自动填写IP *</div>
					<div class="col-md-8">
						<input type="checkbox" name="ipv4_autofill">
						自动创建域中所有IP的PTR记录，并指定域名后缀。
					</div>
				</li>
				<li class="dominType ipv4">
					<div class="col-md-4">创建转发记录*</div>
					<div class="col-md-8">
						<input type="checkbox" name="ipv4_autofill_forward">
						自动为指定域中的每个IP创建转发记录
					</div>
				</li>
				<li class="dominType ipv4">
					<div class="col-md-4">从现有的*创建记录*</div>
					<div class="col-md-8">
						<input type="checkbox" name="ipv4_autofill_reverse_from_forward">
						自动查找要添加的IP范围的任何现有A记录，并在可能的情况下将反向记录设置为它们。
					</div>
				</li>
				<li class="dominType ipv4">
					<div class="col-md-4">自动填写IP *</div>
					<div class="col-md-8">
						<input type="text" name="ipv4_autofill_domain" class="form-control">
					</div>
				</li>
				<li class="dominType ipv6">
					<div class="col-md-4">注意</div>
					<div class="col-md-8">
							此接口允许您通过指定范围以及CIDR值来为IPv6网络范围设置反向DNS记录。
					</div>
				</li>
				<li class="dominType ipv6">
					<div class="col-md-4">IPv6网络范围*</div>
					<div class="col-md-8">
						<input type="text" name="ipv6_network" class="form-control">
						总是包含一个/ cidr值（/ 1到/ 64）
					</div>
				</li>
				<li>
					<div class="col-md-4">描述</div>
					<div class="col-md-8">
						<textarea class="form-control" name="domain_description"></textarea>
					</div>
				</li>
				<li class="m-area-title">域服务器组</li>
				<li class="dominGroup">
					<p>选择该域所属的组或组，组允许域位于特定的名称服务器集合上，这对于隔离目的（例如内部对外部名称服务器）很有用。</p>
				</li>
				<li class="m-area-title">管理记录信息</li>
				<li>
					<div class="col-md-4">电邮管理员地址*</div>
					<div class="col-md-8">
						<input type="email" name="soa_hostmaster" class="form-control" value="475144@ww.com">
					</div>
				</li>
				<li>
					<div class="col-md-4">域序列号*</div>
					<div class="col-md-8">
						<input type="number" name="soa_serial" class="form-control">
					</div>
				</li>
				<li>
					<div class="col-md-4">刷新定时器*</div>
					<div class="col-md-8">
						<input type="number" name="soa_refresh" class="form-control" value="21600">
					</div>
				</li>
				<li>
					<div class="col-md-4">刷新重试超时*</div>
					<div class="col-md-8">
						<input type="number" name="soa_retry" class="form-control" value="3600">
					</div>
				</li>
				<li>
					<div class="col-md-4">到期定时器*</div>
					<div class="col-md-8">
						<input type="number" name="soa_expire" class="form-control" value="604800">
					</div>
				</li>
				<li>
					<div class="col-md-4">默认记录TTL*</div>
					<div class="col-md-8">
						<input type="number" name="soa_default_ttl" class="form-control" value="120">
					</div>
				</li>
				<li><span class="btn btn-md btn-primary saveConfig">保存设置</span></li>
			</ul>
		</form>
		</div>
	</div>
</section>
<{/block}>

<{block name=js}>
<script type="text/javascript">
	$('.m-domains-type input').click(function(){
		var targ = $(this).data('target');
		$('.dominType').hide();
		$('.' + targ).show();
	});


	(function () {
		// 填充默认的序列号
		var date = new Date();
		var yy = date.getFullYear();
		var mm = Number(date.getMonth())+1;
		mm = (mm >= 10 ? mm : "0" + mm);
		var dd = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate();

		$('[name="soa_serial"]').val(yy + '' + mm + '' + dd);
		ajaxObj('/Domains/getGroupList', 'get', '', function(obj){
			var group = '';
			obj.map(function(data){
				group += `<div class="box">
										<input type="checkbox" 
											name="id_group" 
											value="${data.id}">
										${data.group_name}-${data.group_description}
									</div>`
			})
			$(".dominGroup").append(group);
			$(".dominGroup input:first")[0].checked = true;
		})
	})();

	$('.saveConfig').click(function(){
		var isAllow = true;
		var obj = {};
		$('.infoForm li:visible input').each(function(index, data){
			if($(data).val() == ''){
				isAllow = false;
				$(data).focus();
				layer.tips('此项为必填项！', $(data));
				return false;
			}
			if($(data).attr('type') == 'checkbox'){
				if($(data)[0].checked){
					if(!obj[$(data).attr('name')]){
						obj[$(data).attr('name')] = [];
					}
					obj[$(data).attr('name')].push($(data).val());
				}
			}else if($(data).attr('type') == 'radio'){
				($(data)[0].checked == true) && (obj[$(data).attr('name')] = $(data).val())
			}else{
				obj[$(data).attr('name')] = $(data).val();
			}
		});
		var email = $('input[name="soa_hostmaster"]').val();
		var reg = /\w+[@]{1}\w+[.]\w+/;
		if(!reg.test(email))
		{
			layer.msg('请输入有效的email地址');
			return false;
		}
		if(isAllow){
			obj['domain_description'] = $('[name="domain_description"]').val();
			ajaxObj('/Domains/addData', 'post', obj, function(obj){
				layer.msg(obj.msg);
				setTimeout(function(){
					window.location.reload();
				}, 500)
			})
		}
	})
</script>
<{/block}>